import { PerspectiveCamera, OrthographicCamera } from 'three';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';
/**
 * @param options.canvas {canvas} 渲染用canvas 
 * @param options.scaler {boolean} 是否创建比例尺 
 */
class ComposeControl {
    constructor(options) {
        this.options = options;
        const canvas = options.canvas;
        const aspect = canvas.clientWidth / canvas.clientHeight;
        this._persCamera = new PerspectiveCamera(60, aspect, 1, 1000);
        this._persCamera.position.set(150, 150, 150);
        this._orthCmaera = new OrthographicCamera(400 * aspect / -2, 400 * aspect / 2, 200, -200, 1, 1000);
        this._orthCmaera.position.set(150, 150, 150);
        this._canvas = canvas;
        if (options.scaler) this.orthDiv();
        this.createControls(this._persCamera);
    }

    get Camera() {
        return this._controls.object;
    }

    createControls(camera) {
        this._controls = new TrackballControls(camera, this._canvas);
        this._controls.rotateSpeed = 1.0;
        this._controls.zoomSpeed = 1.2;
        this._controls.panSpeed = 0.8;
        this._controls.staticMoving = true;
        this._controls.dynamicDampingFactor = 0.3;
        this._controls.keys = [65, 83, 68];
        if (this.options.scaler){
            this._controls.addEventListener("end",()=>{
                if(this._controls.object.isOrthographicCamera){
                    this.orthScaler(this._orthCmaera.zoom);
                }
            })
        }
    }

    orthDiv() {
        const scaleruler = document.createElement("div");
        scaleruler.id = "scaleruler";
        const scaler_label = document.createElement("div");
        scaler_label.id = "scaler_label";
        scaleruler.appendChild(scaler_label);
        const scaler_lxs = document.createElement("canvas");
        scaler_lxs.id = "scaler_lxs";
        scaleruler.appendChild(scaler_lxs);
        document.body.appendChild(scaleruler);
    }

    orthScaler(zoom = 1.0) {
        let scaler_lxs = document.getElementById("scaler_lxs");
        scaler_lxs.style.width = 200 + "px";
        scaler_lxs.style.height = 15 + "px";
        scaler_lxs.width = Math.floor(200 * window.devicePixelRatio);
        scaler_lxs.height = Math.floor(15 * window.devicePixelRatio);
        const ctx = scaler_lxs.getContext("2d");
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        ctx.fillStyle = "black";
        ctx.fillRect(0, 2, 100, 300);
        ctx.fillStyle = "white";
        ctx.fillRect(100, 0, 100, 300);

        let range = this._orthCmaera.right - this._orthCmaera .left;
        let pixel_100 = 100 * range / this._canvas.width / zoom;
        let scale_label = document.getElementById("scaler_label");
        scale_label.innerText = pixel_100.toFixed(3) + "mm";
        let sacle_label_width = ctx.measureText(scale_label.innerText);
        sacle_label_width = (200 - sacle_label_width.width * window.devicePixelRatio) / 2;
        scale_label.style.marginLeft = sacle_label_width + "px";
    }

    scalerVis(vis){
        if(!this.options.scaler) return;
        const scaler_container=document.getElementById("scaleruler");
        scaler_container.style.visibility=vis?"visible":"hidden";
    }

    SetPersCamera(){
        this.createControls(this._persCamera);
        this.scalerVis(false);
    }

    SetOrthCamera(){
        this.createControls(this._orthCmaera);
        this.orthScaler(this._orthCmaera.zoom);
        this.scalerVis(true);
    }

    HandleResize(){
        this._controls.handleResize();
    }

    Update(){
        this._controls.update();
    }

    UpdateCamera(){
        const aspect=this._canvas.clientWidth/this._canvas.clientHeight;
        this._persCamera.aspect=aspect;
        this._persCamera.updateProjectionMatrix();
        this._orthCmaera.aspect=aspect;
        this._orthCmaera.updateProjectionMatrix();
    }
}

export {ComposeControl};